<template>
	<view class="flex flex-col relative" :style="{ 'background-color': backgroundColor }">
		<slot name="default"></slot>
	</view>
</template>

<script lang="ts" setup>
import {
	provide,
	getCurrentInstance,
	computed,
	watchEffect,
	ref,
	watch,
	onBeforeMount,
	ComponentInternalInstance,
} from 'vue';
import { useAcPiniaStore } from '@/uni_modules/ac-ui/libs/store/acpinia';
import { pub_props } from '@/uni_modules/ac-ui/libs/minxs/props';

const store = useAcPiniaStore();

const props = defineProps({
	...pub_props,
	bg: {
		type: String,
		default: 'grey-2',
	},
	//应用的背景图。https://picsum.photos/750/1448
	bgImg: {
		type: String,
		default: '',
	},
	//应用的背景颜色。
	color: {
		type: String,
		default: 'grey-4',
	},
	blur: {
		type: [Boolean, String],
		default: false,
	},
	navbar: {
		type: Object,
		default: () => {
			return {
				background: '#ffffff',
				fontColor: '#000000',
			};
		},
	},
	tabar: {
		type: Object,
		default: () => {
			return {
				background: '#ffffff',
				fontColor: '#222222',
			};
		},
	},
});

let backgroundColor = getBackgroundColor();

function getBackgroundColor() {
	// const bgArr = props.bg.split('-');
	// return store.themeArr[store.theme][bgArr[0]][parseInt(bgArr[1]) || 5];
}

function setAppStyle() {
	console.log('更新app主题');
	console.log(getApp().globalData);
}

function setTheme(colorName: string) {
	console.log(colorName);
	// store.setTmVuetifyTheme(colorName)
}

//设定暗黑
function setDark(dark?: boolean) {
	console.log(dark);
}

defineExpose({
	setTheme: setTheme,
	setDark: setDark,
});

onBeforeMount(() => setAppStyle());
</script>

<style>
.relative {
	position: relative;
}
</style>
